
import React from "react";
import styles from './index.module.less'
import Controller from 'Controller'

export default function Foot() {

    const threeController = Controller.instance.useMemo(s => s.threeController, [])

    const cameraPosition = threeController.useMemo(s => s.camera?.position, []);

    const [position, setPosition] = React.useState({ x: 10, y: 10, z: 10 });

    const controls = threeController.useMemo(s => s.controls, []);

    React.useEffect(() => {
        const onChange = () => {
            setPosition({
                x: cameraPosition?.x ?? 0,
                y: cameraPosition?.y ?? 0,
                z: cameraPosition?.z ?? 0,
            })
        }

        controls?.addEventListener('change', onChange)
        return () => {
            controls?.removeEventListener('change', onChange)
        }
    }, [cameraPosition?.x, cameraPosition?.y, cameraPosition?.z, controls])

    return (
        <span className={styles.foot} >
            <span>摄像机：</span>
            <span className={styles.property} >x：{position.x}</span>
            <span className={styles.property} >y：{position.y}</span>
            <span className={styles.property} >z：{position.z}</span>
        </span>
    )
}